<template>
  <div class="container">
    <div class="header">
      <!-- 下拉选择项 -->
      <div class="slectbox">
        <div :class="screen==1&&selectH>0&&'selected'" @click="selectScreen(1)">
          <span>医院筛选</span>
          <span class="arrow"></span>
        </div>
        <div class="cen"></div>
        <div :class="screen==2&&selectH>0&&'selected'" @click="selectScreen(2)">
          <span>智能排序</span>
          <span class="arrow"></span>
        </div>
      </div>
      <!-- 下拉选择列表-医院筛选 -->
      <div
        class="hospitalbox"
        :class="screen==1&&selectH>0&&isShow&&'show'"
        :style="{height:selectH+'rpx'}"
      >
        <div class="lf">
          <div
            :class="current==index&&'actived'"
            v-for="(item,index) in hospital"
            :key="index"
            @click="current = index"
          >{{item.province_name}}</div>
        </div>
        <div class="rt">
          <div class="item" v-for="(el,i) in hospitalArr" :key="i" @click="screenData(el)">
            <img v-if="imgUrl&&el.hospital_image" :src="imgUrl+el.hospital_image" alt />
            <div class="hospitalname">{{el.hospital}}</div>
          </div>
        </div>
      </div>
      <!-- 下拉选择列表-智能排序 -->
      <div
        class="intelligencebox"
        :class="screen==2&&selectH>0&&isShow&&'show'"
        :style="{height:selectH+'rpx'}"
      >
        <div @click="selectSort(1)">智能排序</div>
        <div @click="selectSort(2)">距离最近</div>
        <div @click="selectSort(3)">预约最多</div>
      </div>
      <div class="mask" :class="selectH>0&&isShow&&'maskshow'" @click="selectH=0"></div>
    </div>
    <scroll-view :scroll-y="true" :style="{'height': '100%'}">
      <projectHospital :projectArr="dataArr" :ticket_id="ticket_id"></projectHospital>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import projectHospital from "@/components/projectHospital/index";
export default {
  components: { projectHospital },
  data() {
    return {
      imgUrl: common.image_response, //http图片
      screen: 0, // 1 医院筛选，2 智能排序，0初始值
      selectH: 0, //下拉框的高度
      isShow: false, //下拉框显示隐藏
      ticket_id: "", //优惠券id
      lng: "", //经度
      lat: "", //纬度
      hospital_id: "", //医院id
      sort: 1, //排序 1智能 2距离最近 3预约最多
      dataArr: [],
      hospital: [], //医院筛选数据
      hospitalArr: [], //省份对应医院
      current: 0 //当前选中的省份
    };
  },
  watch: {
    current(newVal, oldVal) {
      this.hospital.filter((val, index) => {
        if (newVal == index) {
          this.hospitalArr = val.data || [];
        }
      });
    }
  },
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: "选择项目医院"
    });
    // 获取参数
    if (options.ticket_id) {
      this.ticket_id = options.ticket_id;
    }
    this.getProjectList();
  },
  methods: {
    // 获取数据
    getProjectList() {
      if (wx.getStorageSync("province_info")) {
        this.lng = JSON.parse(wx.getStorageSync("province_info")).lgd;
        this.lat = JSON.parse(wx.getStorageSync("province_info")).ltd;
        this.getData();
      } else {
        this.getLocation();
      }
    },
    // 获取医院项目
    getData() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/act/activity/getProject",
        {
          ticket_id: this.ticket_id,
          lng: this.lng,
          lat: this.lat,
          hospital_id: this.hospital_id,
          sort: this.sort
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.dataArr = [...res.data] || [];
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 获取经纬度
    getLocation() {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success() {
          wx.getLocation({
            type: "gcj02",
            success(res) {
              that.lng = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              that.lat = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              that.getData();
            },
            fail() {
              wx.showToast({
                title: "无法获取地理位置",
                icon: "none",
                duration: 2000,
                mask: true
              });
              that.getData();
            }
          });
        },
        fail() {
          that.getData();
        }
      });
    },
    // 获取医院筛选条件
    getHospital() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/act/activity/serchInfo",
        {
          ticket_id: this.ticket_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.hospital = [...res.data] || [];
            this.hospital.filter((val, index) => {
              if (this.current == index) {
                this.hospitalArr = val.data || [];
              }
            });
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //选中医院筛选，智能排序
    selectScreen(val) {
      this.screen = val;
      this.isShow = true;
      switch (val) {
        case 1: //医院筛选
          this.selectH = 570;
          this.getHospital();
          break;
        case 2: //智能排序
          this.selectH = 318;
          break;
      }
    },
    // 医院筛选
    screenData(val) {
      this.hospital_id = val.hospital_id;
      this.isShow = false;
      this.getProjectList();
    },
    // 智能排序
    selectSort(val) {
      this.sort = val;
      this.isShow = false;
      this.getProjectList();
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f7f8fa;
  .header {
    position: sticky;
    top: 0;
    z-index: 999;
    // 下拉选择项
    .slectbox {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 44px;
      background: rgba(255, 255, 255, 1);
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      div {
        position: relative;
        width: 40%;
        text-align: center;
        .arrow {
          position: absolute;
          right: 32px;
          top: 8px;
          width: 0;
          height: 0;
          border-right: 4px solid transparent;
          border-left: 4px solid transparent;
          border-top: 4px solid #d2d2d2;
          border-bottom: 4px solid transparent;
        }
      }
      .selected {
        .arrow {
          transform: rotate(180deg);
          top: 4px;
        }
      }
      .cen {
        width: 1px;
        height: 15px;
        background: #e6e6e6;
      }
    }
    // 下拉选择列表-医院筛选
    .hospitalbox {
      width: 100%;
      position: absolute;
      top: 44px;
      left: 0;
      background: #f3f4f6;
      display: flex;
      visibility: hidden;
      transition: all 0.2s ease-in-out;
      .lf {
        margin-right: 24px;
        overflow: auto;
        div {
          background: #ffffff;
          text-align: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(29, 32, 35, 1);
          padding: 12px 16px;
          box-sizing: border-box;
          &.actived {
            background: #f3f4f6;
            position: relative;
            &::before {
              position: absolute;
              left: 0;
              content: "";
              display: block;
              width: 3px;
              height: 20px;
              background: rgba(255, 115, 164, 1);
            }
          }
        }
      }
      .rt {
        flex: 1;
        overflow: auto;
        padding: 13px 12px 0 0;
        box-sizing: border-box;
        .item {
          display: flex;
          align-items: center;
          padding-bottom: 18px;
          box-sizing: border-box;
          img {
            display: block;
            width: 50px;
            height: 50px;
            background: rgba(216, 216, 216, 1);
            border-radius: 50%;
            margin-right: 10px;
          }
          .hospitalname {
            flex: 7;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .intelligencebox {
      width: 100%;
      position: absolute;
      top: 44px;
      left: 0;
      background: #ffffff;
      padding: 23px 0 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      visibility: hidden;
      transition: all 0.1s ease-in-out;
      box-sizing: border-box;
      div {
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
    .show {
      visibility: visible;
    }
    // 遮罩蒙层
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: -1;
      transition: all 0.2s ease-in-out;
      opacity: 0;
      visibility: hidden;
      &.maskshow {
        opacity: 1;
        visibility: visible;
      }
    }
  }
}
</style>